import React from 'react'
import Navbar from '../../compents/NavBar';
import { CalendarPickerView } from 'antd-mobile'
import { Stepper } from 'antd-mobile'
import { Checkbox } from 'react-vant';
type Props = {}

const Index = (props: Props) => {
    return (
        <div>

            <Navbar />
            <div className='Rl'>
                <CalendarPickerView />
            </div>
            <h2>选择你的票</h2>
            <div className='P'>
                <div className='vip'>
                    <span>VIP参观</span>
                    <Checkbox defaultChecked onChange={val => console.log(val)} />
                </div>
                <div className="sVIP">
                    <div className='VIPp'>
                        <img src="https://t10.baidu.com/it/u=1472401995,1612197972&fm=58" alt="" />
                        <div>
                            <h3>厘清地平线上的艺术魅力:视觉创意聚集的未来空间</h3>
                            <p>
                                <span>10张余票</span>
                                <b>￥299</b>
                            </p>
                        </div>
                    </div>
                    <Stepper
                        defaultValue={1}
                        max={10}
                        min={0}
                        onChange={value => {
                            console.log(value)
                        }}
                    />
                </div>
            </div>
            <div className='P'>
                <div className='vip'>
                    <span>普通参观</span>
                    <Checkbox defaultChecked onChange={val => console.log(val)} />
                </div>
                <div className="sVIP">
                    <div className='VIPp'>
                        <img src="https://t10.baidu.com/it/u=1472401995,1612197972&fm=58" alt="" />
                        <div>
                            <h3>厘清地平线上的艺术魅力:视觉创意聚集的未来空间</h3>
                            <p>
                                <span>10张余票</span>
                                <b>￥299</b>
                            </p>
                        </div>
                    </div>
                    <Stepper
                        defaultValue={1}
                        max={10}
                        min={0}
                        onChange={value => {
                            console.log(value)
                        }}
                    />
                </div>
            </div>
        </div>
    )
}

export default Index;